<!DOCTYPE html>
<html>

<head lang="en">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="er">
        {{a}}
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#er',
            data: {
                a: 'Hello Vue!',
            },
            beforeCreate: function () {
                console.log('实例创建前被调用');
            },
            created: function () {
                console.log('实例创建后立即调用');
            },
            beforeMount: function () {
                console.log('在挂载开始前被调用，相关渲染首次调用');
            },
            mounted: function () {
                console.log('el被新创建的vm.$el替换，挂载成功');
            },
            beforeUpdate: function () {
                console.log('数据更新时调用');
            },
           updated: function () {
                console.log('组件dom已经更新，组件更新完毕');
            }
        });
        setTimeout(function(){
            vm.a="change...."
        },3000);
    </script>
</body>

</html>